<template>
  <div class="home-page">
    <!-- 欢迎标语 -->
    <div class="welcome-banner">
      <div class="banner-overlay"></div>
      <div class="banner-content">
        <h1>欢迎来到求职招聘系统</h1>
        <p>连接优秀人才与卓越企业，开启职业发展新篇章</p>
        <div class="banner-buttons">
          <el-button type="primary" size="large" @click="findJobs">
            <i class="el-icon-search"></i>
            查找职位
          </el-button>
        </div>
      </div>
    </div>
    
    <!-- 轮播图广告 -->
    <carousel />
    
    <!-- 热门岗位推荐 -->
    <div class="content-section">
      <recommended-jobs />
    </div>
    
    <!-- 统计信息 -->
    <div class="stats-section">
      <div class="stat-card" v-for="stat in stats" :key="stat.title">
        <div class="stat-icon" :style="{ backgroundColor: stat.color }">
          <i :class="stat.icon"></i>
        </div>
        <div class="stat-info">
          <div class="stat-number">{{ stat.number }}</div>
          <div class="stat-title">{{ stat.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Carousel from '@/components/Carousel.vue'
import RecommendedJobs from '@/components/RecommendedJobs.vue'
import { ref } from 'vue'

const stats = ref([
  {
    title: '职位数量',
    number: '10,000+',
    icon: 'el-icon-office-building',
    color: '#6a5acd'
  },
  {
    title: '企业用户',
    number: '5,000+',
    icon: 'el-icon-user',
    color: '#4b0082'
  },
  {
    title: '求职者',
    number: '50,000+',
    icon: 'el-icon-user-solid',
    color: '#9370db'
  },
  {
    title: '简历投递',
    number: '100,000+',
    icon: 'el-icon-document',
    color: '#7b68ee'
  }
])

const findJobs = () => {
  console.log('Find jobs clicked')
}

const postJob = () => {
  console.log('Post job clicked')
}
</script>

<style lang="scss" scoped>
.home-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 75px);
  
  .welcome-banner {
    background-image: url('https://img.tukuppt.com/ad_preview/07/05/53/64ba52ea6dd37.jpg!/fw/780'); /* 添加背景图片 */
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    padding: 50px;
    margin-bottom: 30px;
    color: white;
    text-align: center;
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .banner-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.4); /* 半透明遮罩 */
      border-radius: 10px;
    }
    
    .banner-content {
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
      
      h1 {
        font-size: 36px;
        margin-bottom: 20px;
      }
      
      p {
        font-size: 18px;
        margin-bottom: 30px;
      }
      
      .banner-buttons {
        .el-button {
          margin: 0 10px;
          
          &:first-child {
            background-color: #409eff;
            border-color: #409eff;
          }
          
          &:last-child {
            background-color: #ff9800;
            border-color: #ff9800;
          }
        }
      }
    }
  }
  
  .content-section {
    margin-bottom: 30px;
  }
  
  .stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 30px;
    
    .stat-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      display: flex;
      align-items: center;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      
      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20px;
        
        i {
          font-size: 24px;
          color: white;
        }
      }
      
      .stat-info {
        .stat-number {
          font-size: 24px;
          font-weight: bold;
          color: #303133;
          margin-bottom: 5px;
        }
        
        .stat-title {
          font-size: 14px;
          color: #909399;
        }
      }
    }
  }
}
</style>